<template>
  <div>
    <nav-bar title="加班申请"></nav-bar>
    <div class="maxinBox">
      <van-cell v-if="teamLeader" required title="加班人" is-link :value="builderIds" @click="onChoosePerson" />
      <van-field
        disabled
        v-else
        v-model="builder"
        name="加班人"
        label="加班人"
        placeholder="请输入加班人"
      />
      <van-field
        required
        v-model="form.content"
        name="加班原因"
        label="加班原因"
        placeholder="请输入加班原因"
      />
      <van-cell required title="开始时间" @click="startDate" is-link :value="form.startDate" />
      <van-popup v-model="showStartDate" position="bottom" style="height: 40%">
        <van-datetime-picker
          @confirm="startDateConfirm"
          @cancel="showStartDate = false"
          title="请选择开始时间"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <van-cell required title="结束日期" @click="endDate" is-link :value="form.endDate" />
      <van-popup v-model="showEndDate" position="bottom" style="height: 40%">
        <van-datetime-picker
          @confirm="endDateConfirm"
          @cancel="showEndDate = false"
          title="请选择结束日期"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <van-field
        disabled
        v-model="form.overTime"
        name="加班时长"
        label="加班时长"
        placeholder="请输入加班时长"
      />
      <div class="backgroundfff" style="position: fixed;bottom: 0;width: 100%;">
        <div style="padding: 0.3125rem 10%;">
          <van-button round block type="info" @click="addReported">
            提交
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Bus from '../../../../utils/eventBus.js'
  import moment from 'moment'
  import overtimePayManage from '../../../../api/workAPI/overtimePayManage.js'
  export default {
    data() {
      return {
        builder: JSON.parse(localStorage.getItem('name')).name,
        teamLeader: '',
        builderIds: '请选择加班人',
        showStartDate: false,
        showEndDate: false,
        minDate: moment(new Date()).add(0,'days')._d,
        maxDate: moment(new Date()).add(20,'days')._d,
        form: {
          startDate: '',
          endDate: '',
          overTime: '',
          builderIds: [],
          content: ''
        }
      }
    },
    created() {
      Bus.$on('personList', data => {
          this.builderIds = data.choosePersonal.map(item => {
            return item.userName
          }).join(',')
          this.form.builderIds = data.choosePersonal.map(item => {
            return item.builderId
          })
      })
    },
    methods: {
      onChoosePerson() {
        this.$router.push({
          name: 'ChoosePersonalOvertime'
        })
      },
      // 选择开始时间
      startDate() {
        this.showStartDate = true
      },
      // 开始时间选择确定按钮
      startDateConfirm(val) {
       this.form.startDate = moment(val).format('YYYY-MM-DD HH:mm')
       this.showStartDate = false
      },
      // 选择结束时间
      endDate() {
        this.showEndDate = true
      },
      // 结束时间选择确定按钮
      endDateConfirm(val) {
       this.form.endDate = moment(val).format('YYYY-MM-DD HH:mm')
       this.showEndDate = false
       this.form.overTime = ((new Date(this.form.endDate).getTime() - new Date(this.form.startDate).getTime()) / 3600000).toFixed(2) + '小时'

      },
      // 提交
      addReported() {
        if (!this.form.builderIds.length && this.teamLeader) {
          this.$toast.fail('请选择加班人')
          return
        }
        if (this.form.content === '') {
          this.$toast.fail('加班原因不能为空')
          return
        }
        if (this.form.startDate === '') {
          this.$toast.fail('加班开始时间不能为空')
          return
        }
        if (this.form.endDate === '') {
          this.$toast.fail('加班结束时间不能为空')
          return
        }
        overtimePayManage.addWorkOvertime(this.form).then(res => {
          this.$toast('添加成功')
          this.$router.push({
            name: 'OvertimePayManage'
          })
        })
      }
    },
    mounted() {
      this.teamLeader = JSON.parse(localStorage.getItem('name')).teamLeader
    }
  }
</script>

<style scoped lang="scss">
/deep/ .van-field--disabled .van-field__label{
  color: #646566;
}
</style>
